<template>
  <div class="collection_page">
    <van-nav-bar title="收藏列表" left-arrow @click-left="onClickLeft" />
    <van-card
      v-for="(item, index) in collectionList"
      :key="index"
      :price="`${item.price}元/月`"
      :desc="item.desc"
      :title="item.title"
      :thumb="`http://liufusong.top:8080${item.houseImg}`"
    >
      <template #tags>
        <van-tag plain type="success">{{ item.tags[0] }}</van-tag>
      </template>
    </van-card>
  </div>
</template>

<script>
import { userFavoritesAPI } from "@/api";
export default {
  name: "collection",
  data() {
    return {
      collectionList: [],
    };
  },
  created() {
    this.$toast.loading({
      message: "加载中...",
      forbidClick: true,
    });
    this.userFavorites();
  },
  methods: {
    async userFavorites() {
      const res = await userFavoritesAPI();
      this.collectionList = res.data.body;
      this.$toast.success("加载成功");
    },
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped lang="less">
.collection_page {
  .van-nav-bar {
    background-color: #21b97a;
    color: #fff;
    :deep(.van-nav-bar__title) {
      color: #fff;
    }
    :deep(.van-icon) {
      color: #fff;
    }
  }
}
.van-card {
  .van-card__title {
    font-weight: bold;
    font-size: 0.4rem;
  }
  .HouseItem_desc__5-mp4 {
    font-size: 0.32rem;
    color: #afb2b3;
  }
  .van-tag--success {
    &.van-tag--plain {
      color: #39becd;
      background: #e1f5f8;
      border: 1px solid transparent;
    }
  }
  :deep(.van-card__price) {
    font-size: 0.32rem;
    color: #fa5741;
  }
}
</style>
